<template>
	<div class="general_materials">
		<div class="tab_con" v-if="tagList.length>0">
			<div class="tab_item" @click="tabChange(index)" v-for="(item, index) in tagList" :key="index">
				<div :class="currentIndex == index?'active':''" class="tab_text">{{item.name}}</div>
				<div v-if="currentIndex == index" class="tab_icon"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
	} from "@ant-design/icons-vue";
	import request from "../../../../../../common/utils/request";
	export default defineComponent({
		props: {
			tagList: {
				type: Array,
				default: ()=> {return []}
			}
		},
		setup(props, context) {
			const state = reactive({
				searchParams: {
					type: 1
				},
				currentIndex: 0,
			});
			
			const getLibraryList = () => {
				let params = {}
				params.merchant_library_id = 0
				context.emit('getCurrentLibrary', params)
			}
			getLibraryList()
			
			const tabChange = (index) =>{
				if(state.currentIndex == index) return
				state.currentIndex = index
				context.emit('folderType', index)
			}
			
			return{
				...toRefs(state),
				tabChange
			}
		},
	});
</script>

<style lang="less" scoped>
	.general_materials{
		.tab_con{
			display: flex;
			.tab_item{
				margin-left: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				cursor: pointer;
				&:nth-child(1){
					margin-left: 0;
				}
				.tab_text{
					color: #fff;
					&.active{
						color: #2878FF;
					}
				}
				.tab_icon{
					width: 100%;
					height: 2px;
					background-color: #2878FF;
					margin-top: 5px;
				}
			}
		}
	}
</style>